<template>
   <el-row>
     <el-col>
       <el-card>
         <!--搜索框开始-->
         <el-row :gutter="20">
           <el-col :span="8">
             <el-button type="success" style="margin-bottom: 10px;" @click="showAddModel">新增</el-button>
           </el-col>
           <el-col :span="16">
             <div class="m-4">
               <div class="block" style="float: right; margin-right: 10px;">
                 <el-select
                     v-model="condition.status"
                     placeholder="请选择是否上架"
                     clearable
                     :value-on-clear=null
                     style="width: 150px"
                     @change="selectByPage(1)"
                      >
                   <el-option   label="上架" value="1" />
                   <el-option  label="下架" value="0" />
                 </el-select>
               </div>
               <div class="block" style="float: right; margin-right: 10px;">
                 <el-select
                     v-model="condition.parentId"
                     clearable
                     :value-on-clear=null
                     placeholder="请选择父分类"
                     style="width: 150px"
                     @change="selectByPage(1)"
                      >
                   <el-option   label="没有父分类~~" value="0" />
                   <el-option
                        v-for="item in allParent"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id"/>
                 </el-select>
               </div>
               <div class="block" style="float: right; margin-right: 10px;">
                 <el-input
                     v-model="condition.name"
                     placeholder="请选择分类名称"
                     clearable
                     @change="selectByPage(1)"
                     style="width: 150px"
                 />
               </div>
             </div>
           </el-col>
         </el-row>
         <!--搜索框结束-->
         <!--表格开始-->
         <el-table :data="pageInfo.list" border style="width: 100%;">
           <el-table-column prop="id" label="ID" />
           <el-table-column label="图片" width="110px">
             <template #default="scope">
               <el-avatar :size="80"
                          shape="square"
                          :src="SERVER_ADDR + '/category/pic/' + scope.row.pic" ></el-avatar>
             </template>
           </el-table-column>
           <el-table-column prop="name" label="名称" />
           <el-table-column prop="dscp" label="描述" />
           <el-table-column label="父分类">
             <template #default="scope">
                <el-text class="mx-1" type="primary" v-if="scope.row.parent">
                  {{scope.row.parent.name}}
                </el-text>
             </template>
           </el-table-column>
           <el-table-column prop="recom" label="是否推荐">
             <template #default="scope">
               <el-switch v-model="scope.row.recom"
                          inline-prompt
                          :inactive-value="0"
                          :active-value="1"
                          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                          inactive-text="不推荐"
                          active-text="推荐"
                          @change="changeRecom(scope.row.id, scope.row.recom)"
               >

               </el-switch>
             </template>
           </el-table-column>
           <el-table-column prop="status" label="是否上下架">
             <template #default="scope">
               <el-switch v-model="scope.row.status"
                          inline-prompt
                          :inactive-value="0"
                          :active-value="1"
                          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                          inactive-text="下架"
                          active-text="上架"
                          @change="chgStatus(scope.row.id, scope.row.status)"
               >
               </el-switch>
             </template>
           </el-table-column>
           <el-table-column label="操作">
             <template #default="scope">
               <el-button type="primary" style="margin-bottom: 10px" @click="showUpdateModel(scope.row.id)"> 修改</el-button>
               <el-popconfirm
                   title="你确定删除吗？"
                   confirm-button-text="确定"
                   cancel-button-text="取消"
                   @confirm="deleteCategory(scope.row.id)"
               >
                 <template #reference>
                   <el-button style="margin-bottom: 10px;" type="danger">删除</el-button>
                 </template>
               </el-popconfirm>
             </template>
           </el-table-column>
         </el-table>
         <!--表格结束-->
         <!-- 分页开始 -->
         <el-row class="row-bg" justify="center">
             <el-pagination background layout="prev, pager, next"
                            :page-count="pageInfo.pages"
                            @update:current-page="selectByPage"
                            style="margin-top: 10px;"
                            v-model:current-page="pageInfo.pageNum" />
         </el-row>
         <!-- 分页结束 -->
       </el-card>
     </el-col>
   </el-row>
  <!-- 新增分类对话框开始 -->
  <el-dialog v-model="addDislogShow" title="新增分类" width="500">
    <el-form>
      <el-form-item label="名称" label-width="20%">
        <el-input v-model="categoryAdd.name" autocomplete="off" placeholder="请输入名称" style="width: 240px" />
      </el-form-item>
      <el-form-item label="描述" label-width="20%">
        <el-input v-model="categoryAdd.dscp" autocomplete="off" placeholder="请输入描述" style="width: 240px" />
      </el-form-item>
      <el-form-item label="是否推荐" label-width="20%">
        <el-radio-group v-model="categoryAdd.recom">
          <el-radio label="推荐" value="0" size="large"/>
          <el-radio label="不推荐" value="1" size="large"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否上架" label-width="20%">
        <el-radio-group v-model="categoryAdd.status">
          <el-radio label="下架" value="0" size="large"/>
          <el-radio label="上架" value="1" size="large"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父类型" label-width="20%">
        <el-select v-model="categoryAdd.parentId"
                   placeholder="请选择父分类"
                   clearable
                   :empty-values="[0]"
                   :value-on-clear="0"
                   style="width: 240px">
          <el-option
              v-for="item in allParent"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="图片" label-width="20%">
        <el-upload class="avatar-uploader"
                   :action="SERVER_ADDR + '/category/upload'"
                   :show-file-list="false"
                   name="pic"
                   :headers="headers"
                   :on-success="handleAvatarSuccessAdd"
                   :before-upload="beforeAvatarUpload">
          <img v-if="categoryAdd.pic" :src="SERVER_ADDR + '/category/pic/' + categoryAdd.pic" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDislogShow = false">取消</el-button>
        <el-button type="primary" @click="insert">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增分类对话框结束 -->
  <!-- 修改分类对话框开始 -->
  <el-dialog v-model="UpdateDislogShow" title="新增分类" width="500">
    <el-form>
      <el-form-item label="名称" label-width="20%">
        <el-input v-model="categoryUpdate.name" autocomplete="off" placeholder="请输入名称" style="width: 240px" />
      </el-form-item>
      <el-form-item label="描述" label-width="20%">
        <el-input v-model="categoryUpdate.dscp" autocomplete="off" placeholder="请输入描述" style="width: 240px" />
      </el-form-item>
      <el-form-item label="是否推荐" label-width="20%">
        <el-radio-group v-model="categoryUpdate.recom" >
          <el-radio label="推荐" :value="0" size="large"/>
          <el-radio label="不推荐" :value="1" size="large"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否上架" label-width="20%">
        <el-radio-group v-model="categoryUpdate.status">
          <el-radio label="下架" :value="0" size="large"/>
          <el-radio label="上架" :value="1" size="large"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="父类型" label-width="20%">
        <el-select v-model="categoryUpdate.parentId"
                   placeholder="请选择父分类"
                   clearable
                   :empty-values="[0]"
                   :value-on-clear="0"
                   style="width: 240px">
          <el-option
              v-for="item in allParent"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="图片" label-width="20%">
        <el-upload class="avatar-uploader"
                   :action="SERVER_ADDR + '/category/upload'"
                   :show-file-list="false"
                   name="pic"
                   :headers="headers"
                   :on-success="handleAvatarSuccessUpdate"
                   :before-upload="beforeAvatarUpload">
          <img v-if="categoryUpdate.pic" :src="SERVER_ADDR + '/category/pic/' + categoryUpdate.pic" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="UpdateDislogShow = false">取消</el-button>
        <el-button type="primary" @click="update">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改分类对话框结束 -->
</template>

<script setup>
import categoryApi from "@/api/categoryApi.js";
import {computed, ref} from "vue";
import {ElMessage} from "element-plus";
import {useTokenStore} from "@/stores/tokenStore.js";

const tokenStore = useTokenStore();
const headers = computed(() => {
  const token = tokenStore.tokenStr;
  return{
    token: token
  }
})
//服务器路径
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
//搜索条件
const condition = ref({
  name: null,
  parentId: null,
  status: null
});
//分页的信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});
//请求所有的数据
const selectByPage = (PageNum) => {
  categoryApi.selectByPage(condition.value, PageNum, 5)
      .then(resp => {
        pageInfo.value =resp.data
      })
}
//父分类
const allParent = ref([]);
//获取所有的父分类
const selectAllParent = () =>{
  categoryApi.selectAllParent()
      .then(resp => {
        allParent.value = resp.data;
      })
}
//添加分类变量
const categoryAdd = ref({
  name:null,
  dscp: null,
  pic: null,
  parentId: 0,
  recom: 1,
  status: 1
})
//是否显示添加对话框
const addDislogShow = ref(false);
//新增显示对话框的
const showAddModel = ()=>{
  addDislogShow.value=true;
}
const insert = () =>{
  categoryApi.insert(categoryAdd.value)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(1)
          addDislogShow.value=false;
          categoryAdd.value = {
            name:null,
            dscp: null,
            pic: null,
            parentId: 0,
            recom: 1,
            status: 1
          }
        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//是否显示修改对话框
const UpdateDislogShow = ref(false);

//修改分类变量
const categoryUpdate = ref({
  name:null,
  dscp: null,
  pic: null,
  parentId: 0,
  recom: 1,
  status: 1
})
//修改显示对话框的
const showUpdateModel = (id)=>{
  categoryApi.selectById(id)
      .then(resp => {
        categoryUpdate.value = resp.data;
      })
  UpdateDislogShow.value=true;
}
//修改推荐
const changeRecom = (id, recom) =>{
  const category = {
    id: id,
    recom: recom
  }

  categoryApi.update(category)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
        }else{
          ElMessage.error(resp.msg);
        }
      })
}
//修改上下架
const chgStatus = (id, status) => {
  const category = {
    id: id,
    status: status
  }

  categoryApi.update(category)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
        }else{
          ElMessage.error(resp.msg);
        }
      })
}
//修改商品分类
const update = ()=>{
  categoryApi.update(categoryUpdate.value)
      .then(resp => {
        if (resp.code == 10000){
          ElMessage.success(resp.msg);
          selectByPage(pageInfo.value.pageNum)
          UpdateDislogShow.value=false;

        }else {
          ElMessage.error(resp.msg)
        }
      })
}
//图片上传的钩子函数
const handleAvatarSuccessAdd = (response, uploadFile) => {
  if (response.code == 10000) {
    ElMessage.success(response.msg);
    categoryAdd.value.pic = response.data;
  }
}
const imageUrlUpdate = ref("");
const handleAvatarSuccessUpdate = (response, uploadFile) => {
  if (response.code == 10000) {

    ElMessage.success(response.msg);
    categoryUpdate.value.pic = response.data;
  }
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('只能上传jpg格式的图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error('图片大小不能超过1MB')
    return false
  }
  return true
}
//删除商品分类
const deleteCategory = (id)=>{
    console.log("删除")
    categoryApi.delete(id)
        .then(resp =>{
          if (resp.code == 10000){
            ElMessage.success(resp.msg);
            selectByPage(1)
          }else {
            ElMessage.error(resp.msg)
          }
        })
}
selectAllParent();
selectByPage(1)
</script>

<style scoped>
.demo-progress .el-progress--line {
  margin-bottom: 10px;
  max-width: 100%;
}

.avatar-uploader,
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dotted #dcdfe6;
  border-radius: 5px;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
}
</style>